﻿@page "/datagrid/row-drag-and-drop"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
  <p>This sample demonstrates the DataGrid component with the row drag and drop feature. Drag and drop rows between DataGrids to move rows.</p>  
</SampleDescription>
<ActionDescription>
   <p>DataGrid rows can be dragged and dropped to another DataGrid by enabling the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop'>AllowRowDragAndDrop</a></code> property. The target control on which the DataGrid rows has to be dropped can be set by using <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID'>TargetID</a></code> property of the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html'>GridRowDropSettings</a></code> component.</p>
   <p>The Selection feature should be enabled to select the rows.  Multiple rows can be selected by simply clicking and dragging them inside the DataGrid.</p>
  <p>In this demo, the Row drag and drop feature is enabled in both the DataGrids. To drag and drop rows between DataGrids select rows, drag and drop them to the adjacent DataGrid.</p>
</ActionDescription>

<div class="col-lg-6 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid id="Grid" DataSource="@GridData" AllowRowDragAndDrop="true" AllowSelection="true" AllowPaging="true">
                <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>
                <GridPageSettings PageCount="1" PageSize="12"></GridPageSettings>
                <GridRowDropSettings TargetID="DestGrid"></GridRowDropSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right"  Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="135"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" TextAlign="TextAlign.Right"  Width="130"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>

<div class="col-lg-1 control-section">
    <div class="content-wrapper">
        <div class="row">
        </div>
    </div>
</div>
        <div class="col-lg-5 control-section">
            <div class="content-wrapper">
                <div class="row">
                    <SfGrid id="DestGrid" DataSource="@SecondGrid" AllowRowDragAndDrop="true" AllowSelection="true" AllowPaging="true">
                        <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>
                        <GridPageSettings PageCount="1" PageSize="12"></GridPageSettings>
                        <GridRowDropSettings TargetID="Grid"></GridRowDropSettings>
                        <GridColumns>
                            <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                            <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="135"></GridColumn>
                            <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                        </GridColumns>
                    </SfGrid>
                </div>
            </div>
        </div>


        @code{

            public List<OrdersDetails> GridData { get; set; }

            public List<OrdersDetails> SecondGrid { get; set; } = new List<OrdersDetails>();


            protected override void OnInitialized()
            {
                GridData = OrdersDetails.GetAllRecords();
            }
        }
